<template>
  <div class="main">
    <el-row :gutter="15">
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content bg-blue">
          <div class="tubiao">
            <i class="el-icon el-iconyonghu2"></i>
          </div>
          <p>玩家总数</p>
          <h3>11,152.0</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content bg-pink">
          <div class="tubiao">
            <i class="el-icon el-iconyonghu2"></i>
          </div>
          <p>今日活跃玩家人数</p>
          <h3>9,235.0</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content bg-green">
          <div class="tubiao">
            <i class="el-icon el-iconyonghu2"></i>
          </div>
          <p>房卡消耗总数</p>
          <h3>2,139.0</h3>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="grid-content bg-purple">
          <div class="tubiao">
            <i class="el-icon el-iconyonghu2"></i>
          </div>
          <p>新增留言</p>
          <h3>152.0</h3>
        </div>
      </el-col>
    </el-row>
    <!-- 数据表格统计 -->
    <el-row :gutter="15">
      <el-col :xs="24" :lg="12">
        <div class="show-chart">
          <ve-histogram :data="chartData"></ve-histogram>
        </div>
      </el-col>
      <el-col :xs="24" :lg="12">
        <div class="show-chart">
          <ve-line :data="chartData2"></ve-line>
        </div>
      </el-col>
    </el-row>

    <!-- 表格展示 -->
    <el-row>
      <el-col :xs="24">
        <div class="show-table">
          <h1>最新文章</h1>
          <el-table :data="tableData" border style="width: 100%" highlight-current-row>
            <el-table-column label="编号" prop="articleId" width="100"></el-table-column>
            <el-table-column label="文章名称" prop="articleName" width="250"></el-table-column>
            <el-table-column label="文章分类" prop="className" width="120"></el-table-column>
            <el-table-column label="状态" prop="status" width="120">
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status === 1 ? 'primary' : 'success'"
                  close-transition
                >{{scope.row.status ? '正常' : '禁用'}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="发布者" prop="userName" width="150"></el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="180"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import {getAllArticles} from '@/api'
export default {
  data() {
    return {
      tableData: [
        {
          articleId: 1,
          articleName: "前端发展史",
          className: "前端",
          status: 1,
          createTime: "2019-11-11",
          userName: "张三"
        },
        {
          articalId: 2,
          articalName: "小程序发展过程",
          className: "小程序",
          status: 0,
          createTime: "2013-12-11",
          userName: "李四"
        },
        {
          articalId: 3,
          articalName: "vue发展史",
          className: "前端",
          status: 1,
          createTime: "2013-1-12",
          userName: "周王"
        }
      ],
      chartData: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323},
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
      },
       chartData2: {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
            { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
            { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
            { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
            { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323},
            { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
          ]
        }
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  },
  mounted(){
    // getAllArticles(1,5).then(res=>{
    //   if(res.code == 200){
    //     this.tableData = res.data;
    //   }
    // });
  }
};
</script>


<style lang="less" scoped>
.main {
  padding-left: 7.5px;
  padding-right: 17.5px;
}
.el-col {
  border-radius: 4px;
  margin-bottom: 20px;
}
.bg-pink {
  background: #f96868;
}
.bg-blue {
  background: #33cabb;
}
.bg-green {
  background: #15c377;
}

.bg-purple {
  background: #926dde;
}
.grid-content {
  border-radius: 4px;
  // min-height: 36px;
  padding: 25px;
  color: #fff;
  text-align: right;
  h3 {
    font-size: 24px;
    margin-top: 10px;
  }
  .tubiao {
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: orange;
    float: left;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.175);
    i {
      font-size: 20px;
    }
  }
}

.show-chart {
  height: 400px;
  padding:20px;
  background: #fff;
}
.show-table {
  padding: 0 20px;
 
  height: 317px;
  background: #fff;
  h1 {
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    color: #333;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }
}
</style>
